<template>
  <a-modal
    :width="810"
    title="推送数据"
    :visible="visible"
    @cancel="handleCancel"
  >
    <div class="push-data-form">
      <a-form :form="form" layout="inline">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="数据集推送名称">
              <a-input v-decorator="['nameInput']" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="期望交付时间">
              <a-date-picker
                v-decorator="[
                  'timeInput',
                  {
                    rules: [{ required: true, message: '请输入时间!' }],
                  },
                ]"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="希望达到构建后的效果">
              <a-input v-decorator="['description']" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-item label="已选">
              <a-select
                v-decorator="[
                  'dataSelection',
                  {
                    rules: [{ required: true, message: '请选择数据' }],
                  },
                ]"
                mode="multiple"
                :max-tag-text-length="70"
                :allow-clear="true"
              >
              </a-select>
              <div class="summary-content">
                <span>数据集{{ datasetNum }}</span>
                <div class="split-line"></div>
                <span>数据视图{{ dataVisNum }}</span>
                <div class="split-line"></div>
                <span>图分析{{ gisNum }}</span>
                <div class="split-line"></div>
                <span>共{{ totalSelection }}个</span>
              </div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-tabs v-model="tabSelection" @change="callback">
          <a-tab-pane key="dataset" tab="数据集" class="tab-container">
            Content of Tab Pane 1
          </a-tab-pane>
          <a-tab-pane
            key="dataVis"
            tab="数据视图"
            class="tab-container"
            force-render
          >
            Content of Tab Pane 2
          </a-tab-pane>
          <a-tab-pane key="gis" tab="时空分析" class="tab-container">
            Content of Tab Pane 3
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </div>

    <template #footer>
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="save" :loading="loading" @click="handleAdd('save')"
        >保存</a-button
      >
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        @click="handleAdd('push')"
        >推送</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  // Watch
} from 'vue-property-decorator'

@Component({
  components: {},
})
export default class PushDataModal extends Vue {
  @Prop({ default: false }) visible!: boolean

  private loading: boolean = false
  // 推送数据弹窗 form
  public form: any
  private datasetNum: number = 0
  private dataVisNum: number = 0
  private gisNum: number = 0
  private tabSelection: string = 'dataset'

  public get totalSelection() {
    return this.datasetNum + this.dataVisNum + this.gisNum
  }

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'push_data_form' })
  }

  handleCancel() {
    this.$emit('cancel')
    this.tabSelection = 'dataset'
  }

  handleAdd(type: string) {
    this.form.validateFields((error: Error, values: any) => {
      if (!error) {
        this.$emit('ok', type)
        console.log(values, 'values')
      }
    })
  }

  callback() {
    // console.log
  }
}
</script>

<style lang="less" scoped>
/deep/ .push-data-form .ant-form-item {
  display: flex;
  margin-bottom: 8px;
}

/deep/ .push-data-form .ant-form-item-control-wrapper {
  flex: 1;
}

.push-data-form {
  .summary-content {
    align-items: center;
    display: flex;

    .split-line {
      background: #999;
      height: 14px;
      margin: 10px 8px;
      width: 1px;
    }
  }

  .tab-container {
    border: 1px solid rgba(233, 233, 233, 1);
  }
}
</style>
